<template>
  <div style="padding-top:10px">
      <div class="homeheader">
          <span class="cernter-title">GREE 授权项目历史数据统计</span>
          <span class="time">{{gettime()}}</span>
      </div>

      <div style="padding: 41px 21px">

        <div class="box1">
            <div class="title-item1">销售公司、经销商投标项目</div>
            <div class="daochu">
                <span class="daochu-font">导出图表</span>
                <img src="../assets/img/daochu.png" style="width:19px;height:19px;margin-left:6px" alt />
            </div>
        </div>


        <div class="box2" style="margin-top:35px">
             <div class="span" style="width:56px">基准时间</div> 
             <DatePicker style="width:122px;margin-left:10px" class="m-l22"></DatePicker>
             <div class="hen" style="margin:0 3px"></div>
             <DatePicker style="width:122px" class="m-l11"></DatePicker>
             <span class="span" style="margin-left:40px">对比时间</span> 
             <DatePicker style="width:122px;margin-left:10px" class="m-l22"></DatePicker>
             <div class="hen" style="margin:0 3px"></div>
             <DatePicker style="width:122px" class="m-l11"></DatePicker>
             <img src="../assets/img/jia.png" style="width:14px;height:14px;margin-left:10px" alt="">
        </div>



      <div class="box4" style="margin-top:20px">
            <div class="box-title" style="width:56px">对比维度</div>
             <CheckboxGroup v-model="checkAllGroup1">
                <Checkbox label="总量" style="margin-left:10px"></Checkbox>
                <Checkbox label="中标" style="margin-left:41px"></Checkbox>
                <Checkbox label="丢单" style="margin-left:41px"></Checkbox>
            </CheckboxGroup>
             <CheckboxGroup v-model="checkAllGroup2">
                <Checkbox label="项目暂停" style="margin-left:41px"></Checkbox>
                <Checkbox label="项目移交" style="margin-left:41px"></Checkbox>
            </CheckboxGroup>
      </div>
      <div class="box4" style="margin-top:20px">
            <div class="box-title" style="width:56px;display: flex;justify-content: space-between"><span>行</span><span>业</span></div>
             <CheckboxGroup v-model="checkAllGroup3">
                <Checkbox label="房地产" style="margin-left:10px"></Checkbox>
                <Checkbox label="公共建筑" style="margin-left:26px"></Checkbox>
            </CheckboxGroup>
      </div>




     <div class="box5">
          <div class="box5-t">授权项目对比一览表 （总体情况）</div>
          <div class="box5-left">
                <div class="box-left-item">
                    <div class="left1">对比周期</div>
                    <div class="left2">基准时间</div>
                    <div class="left2">对比时间1</div>
                    <div class="left2">对比时间2</div>
                    <div class="left3">...</div>
                </div>
                   <div class="ov">
                     <table>
                         <tr>
                            <th style="width:120px">总量</th>
                            <th style="width:236px">中标</th>
                            <th style="width:236px">丢单</th>
                            <th style="width:236px">项目暂停</th>
                            <th style="width:238px">项目移交</th>
                         </tr>
                     </table>
                      <table style="heigh:198px;width:1068px">
                           <tr>
                              <th class="width1">数量</th>
                              <th class="width1">对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">中标率</th>
                              <th class="width3">中标率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">丢单率</th>
                              <th class="width3">丢单率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">暂停率</th>
                              <th class="width3">暂停率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">移交率</th>
                              <th class="width3">移交率对比</th>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                          <tr>
                            <td colspan="14" style="height:15px;background-color:#028EA8;padding-left:20px">
                               <div style="width:111px;height:4px;background:rgba(125,191,204,1);border-radius:2px;"></div>
                            </td>
                          </tr>
                      </table>
                   </div>
          </div>
           <div class="zhus">注 ： </div>
           
            <ol style="1">
              <li>1. 对比规则，基准时间与各对比时间的对比（对比=（基准时间）/对比时间*100%）</li>
              <li>2. 基准时间：xxx 对比时间1: xxx 对比时间2: xxx … </li>
              <li>3. 项目移交：指操作主体的变更。如：操作主体由商经部转为家经部、由总部转为销售公司等（当对比维度选择了项目移交，才显示此注解）</li>
              <li>4. 移交率：项目移交数量/总量*100%（当对比维度选择了项目移交，才显示此注解）</li>
            </ol>
     </div>
   













       <!-- <div class="box6">
         <div class="box5-t">授权项目对比一览表 （行业）</div>
          <div class="box5-left">
                <div class="box-left-item">
                    <div class="left1">对比周期</div>
                    <div class="left2">基准时间</div>
                    <div class="left2">对比时间1</div>
                    <div class="left2">对比时间2</div>
                    <div class="left3">...</div>
                </div>
                   <div class="ov">
                     <table>
                         <tr>
                            <th  style="width:300px">总量</th>
                            <th style="width:300px">中标</th>
                            <th style="width:300px">丢单</th>
                            <th style="width:300px">项目暂停</th>
                            <th  style="width:300px">项目移交</th>
                         </tr>
                     </table>
                      <table style="heigh:198px;width:1068px">
                           <tr>
                              <th class="width1">数量</th>
                              <th class="width1">对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">中标率</th>
                              <th class="width3">中标率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">丢单率</th>
                              <th class="width3">丢单率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">暂停率</th>
                              <th class="width3">暂停率对比</th>
                              <th class="width1">数量</th>
                              <th class="width2">移交率</th>
                              <th class="width3">移交率对比</th>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                           <tr>
                              <td class="width1">10%</td>
                              <td class="width1">20%</td>
                              <td class="width1">50%</td>
                              <td class="width2">50%</td>
                              <td class="width3">30%</td>
                              <td class="width1">30%</td>
                              <td class="width2">30%</td>
                              <td class="width3">50%</td>
                              <td class="width1">30%</td>
                              <td class="width2">10%</td>
                              <td class="width3">50%</td>
                              <td class="width1">50%</td>
                              <td class="width2">10%</td>
                              <td class="width3">10%</td>
                          </tr>
                          <tr>
                            <td colspan="14" style="height:15px;background-color:#028EA8;padding-left:20px">
                               <div style="width:111px;height:4px;background:rgba(125,191,204,1);border-radius:2px;"></div>
                            </td>
                          </tr>
                      </table>
                   </div>
          </div>
           <div class="zhus">注 ： </div>
           
            <ol style="1">
              <li>1. 对比规则，基准时间与各对比时间的对比（对比=（基准时间）/对比时间*100%）</li>
              <li>2. 基准时间：xxx 对比时间1: xxx 对比时间2: xxx … </li>
              <li>3. 项目移交：指操作主体的变更。如：操作主体由商经部转为家经部、由总部转为销售公司等（当对比维度选择了项目移交，才显示此注解）</li>
              <li>4. 移交率：项目移交数量/总量*100%（当对比维度选择了项目移交，才显示此注解）</li>
            </ol>
     </div> -->






      </div>
  </div>
</template>

<script>
export default {
 data(){
    return{
        checkAllGroup1:[],
        checkAllGroup2:[],
        checkAllGroup3:[],
    }
  },
  created(){
    //获取当前时间
    this.gettime()
  },
  methods:{
    gettime(){
       let time = new Date()
       let n = time.getFullYear()
       let y = time.getMonth() + 1
       let r = time.getDate()
       let xq = time.getDay()
       y < 10 ? y = "0" +  y : y
       r < 10 ? r =  "0" + r : r
       if(xq == 0){
         xq = "星期天"
       }
       if(xq== 1){
         xq = "星期一"
       }
       if(xq == 2){
         xq = "星期二"
       }
       if(xq == 3){
         xq = "星期三"
       }
       if(xq == 4){
         xq = "星期四"
       }
       if(xq== 5){
         xq = "星期五"
       }
       if(xq== 6){
         xq = "星期六"
       }
       return `${n}-${y}-${r}     ${xq}`
    }
  },
}
</script>

<style scoped lang="less">
/deep/ .ivu-checkbox-checked .ivu-checkbox-inner{
    background-color: #057997;
}
/deep/ .ivu-checkbox-inner{
    background-color: #0C1231;
}
/deep/ .ivu-checkbox+span, .ivu-checkbox-wrapper+span{
    margin-left: 4px;
    margin-right: 0px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,0.8);
    
}
.homeheader{
  height: 72px;
  width: 100%;
  background-image: url("../assets/img/top.png");
  background-size: 100% 100%;
  position: relative;
  text-align: center;
  .cernter-title{
    font-size:30px;
    font-family:FZZZHUNHJW--GB1-0,FZZZHUNHJW--GB1;
    font-weight:normal;
    color:rgba(160,245,255,1);
  }
  .time{
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    position: absolute;
    right: 14%
  }
}


    .box1{
        display: flex;
        justify-content: space-between;
         .title-item1 {
            width: 234px;
            height: 36px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            line-height: 36px;
            text-align: center;
            background-image: url("../assets/img/bj.png");
            background-size: 100% 100%;
            }

        .daochu {
            width: 118px;
            height: 30px;
            background: rgba(0, 228, 255, 1);
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            .daochu-font {
                font-size:16px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(12,16,48,1);
                height: 28px;
                line-height: 28px;
            }
            }
       
    }
         .box2{  
             display: flex;
             align-items: center;
                .hen{
                    width:14px;
                    height:2px;
                    background:rgba(255,255,255,0.8);
                }
                /deep/ .ivu-input{
                    height:24px;
                    background-color: #06425C;
                    border: none;
                    color:rgba(255,255,255,0.5);
                }
                /deep/ .ivu-input-suffix i{
                    line-height: 24px
                }
                .span{
                    font-size:14px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(255,255,255,0.8);
                }
            }



            .box4{
                display: flex;
                .box-title{
                    font-size:14px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(255,255,255,0.8);
                }
            }















            .box5{
                margin-top: 36px;
                width:1166px;
                height:405px;
                border-radius:10px;
                border:2px solid rgba(2,142,168,1);
                overflow: hidden;
               .zhus{
                  height:17px;
                  font-size:12px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,0.8);
                  line-height:17px;
                  padding-left:20px;
                  margin-top:7px;
                }
                li{
                  padding-left: 20px;
                  font-size:12px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,0.5);
                  margin-top:2px
                }
                .box5-t{
                    width:100%;
                    height:30px;
                    background:linear-gradient(90deg,rgba(40,108,233,1) 0%,rgba(1,210,255,1) 100%);
                    font-size:14px;
                    font-family:PingFangSC-Medium,PingFang SC;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    line-height: 25px;
                    padding-left: 52px;
                }
                .box5-left{
                   display: flex;
                }
                .box-left-item{
                  width:96px;
                  height:251px;
                  background-color:rgba(12,35,65,1);
                  .left1{
                      height: 80px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:80px;
                      border-bottom: 1px solid #45466A;
                  }
                  .left2{
                      height: 39px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:38px;
                      border-bottom: 1px solid #45466A;
                  }
                  .left3{
                      height: 55px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:58px;
                      border-bottom: 1px solid #45466A;
                  }
                }
                th,td{
                  height: 39px;
                  font-size:14px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                  line-height:39px;
                }
                .td{
                  height:38px
                }
                table,tr,th,td{
                  border: 1px solid #45466A
                }
                table{
                  border-collapse:collapse;
                  text-align: center;
                }
                .font-12{
                  font-size:14px;
                  font-family:PingFangSC-Medium,PingFang SC;
                  font-weight:500;
                  color:rgba(1,210,255,1);
                  line-height: 40px;
                  height: 40px;
                  border-left: 1px solid #45466A;
                  border-right: 1px solid #45466A;
                }
                .width1{
                  width: 60px;

                }
                .width2{
                  width: 75px
                }
                .width3{
                  width: 102px
                }
            }













            .box6{
                margin-top: 34px;
                width:1354px;
                height:654px;
                border-radius:10px;
                border:2px solid rgba(2,142,168,1);
                overflow: hidden;
               .zhus{
                  height:17px;
                  font-size:12px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,0.8);
                  line-height:17px;
                  padding-left:20px;
                  margin-top:7px;
                }
                li{
                  padding-left: 20px;
                  font-size:12px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,0.5);
                  margin-top:2px
                }
                .box5-t{
                    width:100%;
                    height:30px;
                    background:linear-gradient(90deg,rgba(40,108,233,1) 0%,rgba(1,210,255,1) 100%);
                    font-size:14px;
                    font-family:PingFangSC-Medium,PingFang SC;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    line-height: 25px;
                    padding-left: 52px;
                }
                .box5-left{
                   display: flex;
                   .ov{
                      width:1500px;
                      overflow-x: scroll
                   }
                }
                .box-left-item{
                  width:96px;
                  height:251px;
                  background-color:rgba(12,35,65,1);
                  .left1{
                      height: 80px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:80px;
                      border-bottom: 1px solid #45466A;
                  }
                  .left2{
                      height: 39px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:38px;
                      border-bottom: 1px solid #45466A;
                  }
                  .left3{
                      height: 55px;
                      width: 100%;
                      font-size:14px;
                      text-align: center;
                      font-family:PingFangSC-Regular,PingFang SC;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      line-height:58px;
                      border-bottom: 1px solid #45466A;
                  }
                }
                th,td{
                  height: 39px;
                  font-size:14px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                  line-height:39px;
                }
                .td{
                  height:38px
                }
                table,tr,th,td{
                  border: 1px solid #45466A
                }
                table{
                  border-collapse:collapse;
                  text-align: center;
                }
                .font-12{
                  font-size:14px;
                  font-family:PingFangSC-Medium,PingFang SC;
                  font-weight:500;
                  color:rgba(1,210,255,1);
                  line-height: 40px;
                  height: 40px;
                  border-left: 1px solid #45466A;
                  border-right: 1px solid #45466A;
                }
                .width1{
                  width: 60px;

                }
                .width2{
                  width: 75px
                }
                .width3{
                  width: 102px
                }
            
            }
            
</style>